(function ($) {
  var banner = function (elm) {
    this.parent = $('#' + elm);
    var len = $('#' + elm + ' img');
    console.log(this.parent, len)
    if (this.parent.length <= 0 || len.length <= 0) {
      return false;
    }
    this.width = this.parent.width();
    this.total = len.length;  // 图片总数
    this.nowView = 1;  //当前轮播的图片 
    this.nowViewLeft = (this.width - (this.width * 0.625)) / 2; // 当前视图的left值
    this.preLeft = 0;  // 当前图片的上一张left值
    this.nextLeft = this.width - (this.width * 0.375); // 当前图片的下一张left值
    this.direct = 'left';  // 轮播方向
    this.delay = 3000; // 轮播间隔
    this.speed = 500; // 轮播速度
    this.timerId = null; // 清除定时
    this.lastLeft = -(this.width * 0.375);  // 最后一张图片的left值
    this.firstLeft = this.width;   // 第一张图片的left值
    this.initContent();
  };
  banner.prototype = {
    initContent: function () {
      var bannerItem = this.parent.find('.banner-item');
      // 初始化所有样式
      bannerItem.css({ height: '70%', width: this.width * 0.375 + 'px', opacity: 0, left: (this.width / 2) + 'px', zIndex: 0, marginTop: '70px', borderRadius: '0px' });
      // 初始化中间图片样式
      this.parent.find('.banner-item:nth-child(' + this.nowView + ')').css({ width: this.width * 0.625 + 'px', height: '100%', opacity: 1, left: this.nowViewLeft + 'px', zIndex: 3, marginTop: 0, borderRadius: '10px' });
      this.parent.find('.banner-item:nth-child(' + this.nowView + ') img').css({ opacity: 1 });
      var pre = this.nowView > 1 ? this.nowView - 1 : this.total;  // 当前图片的上一张
      var next = this.nowView === this.total ? 1 : this.nowView + 1;  // 当前图片的下一张
      // 初始化左边图片样式
      this.parent.find('.banner-item:nth-child(' + pre + ')').css({ opacity: 1, left: this.preLeft + 'px', height: '70%', width: this.width * 0.375 + 'px', zIndex: 0, marginTop: '70px', borderRadius: '0px' });
      this.parent.find('.banner-item:nth-child(' + pre + ') img').css({ opacity: 0.3 });
      // 初始化右边图片样式
      this.parent.find('.banner-item:nth-child(' + next + ')').css({ opacity: 1, left: this.nextLeft + 'px', height: '70%', width: this.width * 0.375 + 'px', zIndex: 0, marginTop: '70px', borderRadius: '0px' });
      this.parent.find('.banner-item:nth-child(' + next + ') img').css({ opacity: 0.3 });
      this.bind()
    },
    bind: function () {
      this.leftMenu = $('#arrow-left');  // 左边切换菜单
      this.rightMenu = $('#arrow-right'); // 右边切换菜单
      var that = this;
      // 鼠标停留
      this.parent.mouseover(function () {
        that.stop()
        that.leftMenu.css({opacity: 1})
        that.rightMenu.css({opacity: 1})
      });
      // 鼠标离开
      this.parent.mouseout(function () {
        that.start()
        that.leftMenu.css({opacity: 0})
        that.rightMenu.css({opacity: 0})
      });
      // 左边菜单
      this.leftMenu.click(function () {
        that.turn('right')
      });
      // 右边菜单
      this.rightMenu.click(function () {
        that.turn('left')
      });
      this.start()
    },
    start: function () {
      if (this.timerId) {
        this.stop()
      }
      var that = this;
      this.timerId = setInterval(function () {
        if (that.direct === 'left') {
          that.turn('left')
        } else {
          that.turn('right')
        }
      }, that.delay)
    },
    stop: function () {
      clearInterval(this.timerId)
    },
    turn: function (dir) {
      var page;
      if (dir === 'right') {
        page = (this.nowView - 1) <= 0 ? this.total : this.nowView - 1
      } else {
        page = (this.nowView + 1) > this.total ? 1 : this.nowView + 1
      }
      this.turnpage(page, dir)
    },
    turnpage: function (page, dir) {
      if (this.locked) {
        return false
      }
      this.locked = true;
      if (this.nowView === page) {
        return false
      }
      var that = this;
      var run = function (page, dir, time) {
        var pre = page > 1 ? page - 1 : that.total;  // 上一张图片
        var next = page === that.total ? 1 : page + 1; //下一张图片
        var lastView = (pre - 1) >= 1 ? pre - 1 : that.total; // 左边最后一张图片
        var firstView = (next + 1) > that.total ? 1 : next + 1;
        if (dir === 'left') {
          // 上一张图片样式
          that.parent.find('.banner-item:nth-child(' + pre + ') img').css({ opacity: 0.3 });
          that.parent.find('.banner-item:nth-child(' + pre + ')').animate({ opacity: 1, left: that.preLeft + 'px', height: '70%', width: that.width * 0.375 + 'px', zIndex: 2, marginTop: '70px', borderRadius: '0px' }, time);
          // 当前图片样式
          that.parent.find('.banner-item:nth-child(' + page + ')').css({ zIndex: 3 });
          that.parent.find('.banner-item:nth-child(' + page + ') img').css({ opacity: 1 });
          that.parent.find('.banner-item:nth-child(' + page + ')').animate({ opacity: 1, left: that.nowViewLeft + 'px', width: that.width * 0.625 + 'px', height: '100%', zIndex: 3, marginTop: 0, borderRadius: '10px' }, time);
          // 下一张图片样式
          that.parent.find('.banner-item:nth-child(' + next + ')').css({ zIndex: 2 });
          that.parent.find('.banner-item:nth-child(' + next + ') img').css({ opacity: 0.3 });
          that.parent.find('.banner-item:nth-child(' + next + ')').animate({ opacity: 1, left: that.nextLeft + 'px', height: '70%', width: that.width * 0.375 + 'px', zIndex: 2, marginTop: '70px', borderRadius: '0px' }, time);
          // 最后一张图片样式
          that.parent.find('.banner-item:nth-child(' + lastView + ')').css({ zIndex: 0 });
          that.parent.find('.banner-item:nth-child(' + lastView + ')').animate({ height: '70%', width: that.width * 0.375 + 'px', opacity: 0, left: that.lastLeft + 'px', zIndex: 0, marginTop: '70px' }, time, '', function () { that.locked = false })
        } else {
          // 下一张图片样式
          that.parent.find('.banner-item:nth-child(' + next + ')').css({ zIndex: 2 });
          that.parent.find('.banner-item:nth-child(' + next + ') img').css({ opacity: 0.3 });
          that.parent.find('.banner-item:nth-child(' + next + ')').animate({ opacity: 1, left: that.nextLeft + 'px', height: '70%', width: that.width * 0.375 + 'px', zIndex: 2, marginTop: '70px', borderRadius: '0px' }, time);
          // 上一张图片样式
          that.parent.find('.banner-item:nth-child(' + pre + ') img').css({ opacity: 0.3 });
          that.parent.find('.banner-item:nth-child(' + pre + ')').animate({ opacity: 1, left: that.preLeft + 'px', height: '70%', width: that.width * 0.375 + 'px', zIndex: 2, marginTop: '70px', borderRadius: '0px' }, time);
          // 当前图片样式
          that.parent.find('.banner-item:nth-child(' + page + ')').css({ zIndex: 3 });
          that.parent.find('.banner-item:nth-child(' + page + ') img').css({ opacity: 1 });
          that.parent.find('.banner-item:nth-child(' + page + ')').animate({ opacity: 1, left: that.nowViewLeft + 'px', width: that.width * 0.625 + 'px', height: '100%', zIndex: 3, marginTop: '0px', borderRadius: '10px' }, time);
          // 最后一张图片样式
          that.parent.find('.banner-item:nth-child(' + firstView + ')').css({ zIndex: 0 });
          that.parent.find('.banner-item:nth-child(' + firstView + ')').animate({ height: '70%', width: that.width * 0.375 + 'px', opacity: 0, left: that.firstLeft + 'px', zIndex: 0, marginTop: '70px' }, time, '', function () { that.locked = false })
        }
        that.nowView = page
      };
      run(page, dir, this.speed)
    }
  };
  window.banner = banner
})(jQuery);
